<script setup lang="ts">
import { ref } from 'vue'
import { Close, Delete, Files, List, Plus, Search, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { findTree } from 'xe-utils'
import type { CustomGridGroupType } from '@/types/custom'

import JsonEditorDialog from '@/components/JsonEditorDialog.vue'

const { t } = useI18n()
const router = useRouter()

interface Props {
  businessItems: RouteItems
}

const props = defineProps<Props>()

const modelValue = defineModel<CustomGridGroupType[]>()

const height = defineModel<number>('height')

const editorRef = ref()

const handlePlus = () => {
  modelValue.value?.push({ id: '', business_id: '', default_value: '', default_value_parse: {} })
}

const handleClear = () => {
  modelValue.value?.splice(0)
}

const handleRemove = (index: number) => {
  modelValue.value?.splice(index, 1)
}

const handleChange = (item: CustomGridGroupType, value: string) => {
  const result = findTree(props.businessItems, (f) => f.id === value)
  if (result && result.item) {
    item.title = t(result.item.meta.title)
  }
}

let jsonIndex = 0
const openJsonDialog = async (item: CustomGridGroupType, index: number) => {
  jsonIndex = index
  editorRef.value.open(item.default_value_parse || {})
}

const onJsonChange = (value: TypedAny) => {
  const item = modelValue.value ? modelValue.value[jsonIndex] : undefined
  if (item) {
    item.default_value_parse = value || {}
  }
}

/**
 * 自定义表格
 * @param item
 * @param name
 * @param title
 */
const openPage = (item: CustomGridGroupType, name: string, title: string) => {
  if (item.business_id) {
    router.push({
      name,
      query: {
        id: item.business_id,
        tagsViewName: `${item.title}-${title}`
      }
    })
  } else {
    ElMessage.warning('未配置业务。')
  }
}
</script>
<template>
  <div>
    <div class="mb5">
      <b class="color-warning">注：</b>
      <i>若想使用分级表，需要将业务菜单模板配置成</i>
      <span class="color-danger"> “/components/grid/TemplateGridGroup.vue” </span>
      <i>表格组模板，否则以下配置不会生效。</i>
    </div>
    <el-space :size="5" class="mb5">
      <el-tooltip effect="dark" content="<=100为百分比，>100为px" placement="top-start">
        <div style="width: 80px" class="text-right flex align-center justify-end">
          <span>主表高度</span>
          <el-icon>
            <Warning />
          </el-icon>
          <span>:</span>
        </div>
      </el-tooltip>
      <el-input-number v-model="height" />
      <el-button :icon="Plus" type="success" @click="handlePlus">新增关联业务</el-button>
      <el-button :icon="Delete" type="danger" @click="handleClear">清空</el-button>
    </el-space>
    <div v-for="(item, index) in modelValue" :key="index" class="mb5">
      <el-space :size="5" class="w100">
        <div style="width: 80px" class="text-right">选择业务:</div>
        <el-tree-select
          v-model="item.business_id"
          filterable
          default-expand-all
          :data="businessItems"
          value-key="id"
          placeholder="选择业务"
          @change="handleChange(item, $event)"
          :props="{ label: 'title' }"
          style="width: 200px"
        />
        <el-tooltip effect="dark" content="<=100为百分比，>100为px" placement="top-start">
          <div style="width: 80px" class="text-right flex align-center justify-end">
            <span>子表高度</span>
            <el-icon>
              <Warning />
            </el-icon>
            <span>:</span>
          </div>
        </el-tooltip>
        <el-input-number v-model="item.height" />
      </el-space>
      <el-space :size="5" class="mt5 w100">
        <div style="width: 80px" class="text-right">自定义标题:</div>
        <el-input v-model="item.title" placeholder="自定义名称" style="width: 200px"></el-input>
        <el-button :icon="Files" @click="openPage(item, 'systemCustom', '表格')"> 表格 </el-button>
        <el-button :icon="Search" @click="openPage(item, 'systemQuery', '查询')"> 查询 </el-button>
        <el-button :icon="List" @click="openPage(item, 'systemForm', '表单')">表单</el-button>
        <el-button type="warning" :icon="List" @click="openJsonDialog(item, index)">
          默认参数
        </el-button>
        <el-button type="danger" :icon="Close" @click="handleRemove(index)" plain>移除</el-button>
      </el-space>
    </div>
    <div style="height: 50px; width: 100%"></div>
    <el-empty :image-size="20" v-if="!modelValue?.length"></el-empty>
    <JsonEditorDialog ref="editorRef" @change="onJsonChange" />
  </div>
</template>
